<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

	<script>
		$(function (){
			//将登录页设置为顶层页
			if (window.top != window){
				window.top.location = window.location;
			}
			//每次刷新将文本框的内容清空
			$("#loginAct").val("");

			//每次刷新获取焦点事件
			$("#loginAct").focus();

			//点击登录按钮，进行验证
			$("#submitBtn").click(function (){
				login()
			})

			//获取键盘事件
			$(window).keydown(function (event){
				//alert(event.keyCode)
				//13代表回车键，点击回测火箭
				if (event.keyCode == 13 ){
					login()
				}
			})
		})

		//自定义function方法，用于验证登录，一定要写在加载页面的外面
		function login(){
			//alert("进行验证操作")

			//获取到账号和密码的值(去除前后空格,使用$.trim())，进行判断
			//有一个为空，就要提示错误信息
			var loginAct = $.trim($("#loginAct").val());
			var loginPwd = $.trim($("#loginPwd").val());

			if (loginAct == "" || loginPwd == ""){
				$("#msg").html("账号和密码不能为空");
			}

			//当账号和密码都不为空，将参数发送到后台进行验证，因为是局部刷新，所以使用ajax请求
			$.ajax({
				url : "settings/user/login.do",
				data : {
					"loginAct" : loginAct,
					"loginPwd" : loginPwd
				},
				type : "post",
				dataType : "json",
				success : function (data) {

					/*后台收到数据，处理完成后，要给我们返回一个结果（成功或者失败）
						data
							{"success" ："true/false","msg" : "哪错了"}*/
					if (data.success){
						//为true验证成功，登录成功，跳转到工作台页面
						//                                         alert(123);
						window.location.href = "workbench/index.jsp";
					}else {
						//为false验证失败，提示错误信息(从后台返回)
						$("#msg").html(data.msg);
					}
				}

			})


		}
	</script>
</head>
<body>
	<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
		<img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
	</div>
	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2021 &nbsp;安广伟的客户管理系统</span></div>
	</div>
	
	<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
		<div style="position: absolute; top: 0px; right: 60px;">
			<div class="page-header">
				<h1>登录</h1>
			</div>
			<form action="workbench/index.jsp" class="form-horizontal" role="form">
				<div class="form-group form-group-lg">
					<div style="width: 350px;">
						<input id="loginAct" class="form-control" type="text" placeholder="用户名">
					</div>
					<div style="width: 350px; position: relative;top: 20px;">
						<input id="loginPwd" class="form-control" type="password" placeholder="密码">
					</div>
					<div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
						
							<span id="msg" style="color: red"></span>
						
					</div>
					<button type="button" id="submitBtn" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>